<template>
	<view class="wrapper">
		<!-- <Head color="#fff" title="" backgroundColor="transparent" leftIcon="left" :border="false"><view class="title">套餐升级</view></Head> -->
		<view class="info">
			<view class="mySetMeal">
				<view class="t1">我的套餐： {{ mysetmealInfo.name }}</view>
				<view class="t2" v-if="mysetmealInfo.deadline == 0">有效期至：无限期</view>
				<view class="t2" v-else>有效期至：{{ mysetmealInfo.deadline | timeFilter2 }}</view>
				<view class="t3" @click="handleJump('/company/Service/MySetmeal')">查看我的特权</view>
			</view>
			<view class="infoInner">
				<view class="setMealType">
					<view class="typeTitle1">权益升级 服务赋能</view>
					<view class="typeTitle2"><text class="text">升级套餐 尽享更多权益</text></view>
					<view class="setMealTypeList">
						<view :class="typeItemIndex == index ? 'typeItem ac' : 'typeItem'"
							v-for="(item, index) in setmealList" :key="index" @click="handleSetMeal(item, index)">
							<view class="recommend" v-if="item.recommend == 1"></view>
							<view class="limit" v-if="item.preferential_open == 1"></view>
							<view class="t1">{{ item.name }}</view>
							<view class="t2">¥{{ item.expense1 }}.{{ item.expense2 }}</view>
							<view class="t3" v-if="item.preferential_open == 1">
								限时特惠至{{ item.preferential_expense_end | timeFilter }}日</view>
							<view :class="item.preferential_open == 0 ? 't4 ac' : 't4'">时长：{{ item.days }}天</view>
						</view>
					</view>
				</view>

				<view class="detail">
					<view class="detail1">
						<view class="detailTitle">套餐资源</view>
						<view class="list">
							<view class="item">职位并发数：{{ setmealDetail.jobs_meanwhile }}</view>
							<view class="item">赠送简历点数：{{ setmealDetail.download_resume_point }}</view>
							<view class="item">赠送职聊次数：{{ setmealDetail.im_total }}</view>
							<view class="item">赠送会员{{ points_byname }}：{{ setmealDetail.gift_point }}</view>
							<view class="item">免费刷新职位：{{ setmealDetail.refresh_jobs_free_perday }}次/天</view>
							<view class="item">下载简历上限：{{ setmealDetail.download_resume_max_perday }}份/天</view>
							<view class="item">发起职聊上限：{{ setmealDetail.im_max_perday }}次/天</view>
						</view>
					</view>
					<view class="detail2">
						<view class="detailTitle pd">套餐特权</view>
						<view class="list">
							<view class="item" v-if="setmealDetail.service_added_discount > 0">
								套餐增值包折扣{{ setmealDetail.service_added_discount }}折</view>
							<view class="item" v-if="setmealDetail.enable_poster == 1">允许使用微海报</view>
							<view class="item" v-if="setmealDetail.enable_video_interview == 1">允许使用视频面试</view>
							<view class="item" v-if="setmealDetail.show_apply_contact == 1">收到简历免费查看</view>
							<view class="item" v-if="setmealDetail.note">说明：{{ setmealDetail.note }}</view>
						</view>
					</view>
				</view>
				<view class="payType">
					<!-- couponList -->
					<picker :disabled="couponList.length <= 1" mode="selector" :range="couponList" range-key="text"
						@change="handleCoupon">
						<view class="coupon">
							<view class="label">优惠券</view>
							<view class="text">
								<view class="">{{ couponName }}</view>
								<uni-icons color="#57270F" type="forward" size="18"></uni-icons>
							</view>
						</view>
					</picker>
					<radio-group @change="handleRadioChange">
						<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
						<label>
							<view class="payLine">
								<view class="label wx">微信支付</view>
								<view class="text">
									<label>
										<radio color="#57270F" value="wxpay" :checked="paymentType == 'wxpay'" />
									</label>
								</view>
							</view>
						</label>
						<!-- #endif -->
						<!-- <label>
							<view class="payLine">
								<view class="label al">支付宝支付</view>
								<view class="text">
									<label><radio color="#57270F" value="alipay" :checked="paymentType == 'alipay'" /></label>
								</view>
							</view>
						</label> -->
					</radio-group>
				</view>
			</view>
			<view class="btns">
				<view class="price">应付金额：￥{{ amount }}</view>
				<view class="payBtn" v-if="is_apply != 0">
					<Pay :paymentType="paymentType" :orderParams="params" @handlePaySuccess="handlePaySuccess"
						@handlePayFail="handlePayFail">立即支付</Pay>
				</view>
				<view class="payBtn" @click="handleErrorPay" v-else>立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error';
	import http from '@/utils/http';
	import api from '@/api';
	import {
		parseTime
	} from '@/utils/index.js';
	import Pay from '@/components/Pay.vue'
	export default {
		components:{
			Pay
		},
		data() {
			return {
				paymentType: 'wxpay',
				// 套餐列表
				setmealList: [],
				// 当前选择套餐详情
				setmealDetail: {},
				//当前选中想下标
				typeItemIndex: 0,
				// 用户当前套餐详情
				mysetmealInfo: {},
				// 购买参数
				params: {
					service_type: 'setmeal',
					service_id: 0,
					payment: 'wxpay',
					coupon_id: 0
				},
				// 旧金额
				old_amount: 0,
				// 最新的金额
				amount: 0,
				// 当前套餐是否允许购买
				is_apply: 0,
				// 优惠券列表
				couponList: [{
					id: 0,
					text: '不使用优惠券',
					name: '不使用优惠券'
				}],
				couponName: '暂无可用优惠券',
				points_byname: ''
			};
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{m}-{d}');
			},
			timeFilter2(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d}');
			}
		},
		created() {
			this.getSetmeal();
			this.getSetmealList();
			this.points_byname = this.$store.state.config.points_byname;
		},
		methods: {
			// 后台设置不允许支付
			handleErrorPay() {
				uni.showToast({
					title: '此套餐暂不允许购买',
					icon: 'none'
				});
			},
			// 支付失败
			handlePayFail(err) {
				uni.navigateTo({
					url: '/commonViews/service/OrderList'
				});
			},
			// 支付成功
			handlePaySuccess(res) {
				uni.navigateTo({
					url: '/commonViews/service/OrderList'
				});
			},
			// 支付方式切换
			handleRadioChange(e) {
				this.paymentType = e.detail.value;
				this.params.payment = e.detail.value;
			},
			// 选择优惠券
			handleCoupon(e) {
				var index = e.detail.value;
				var currentItem = this.couponList[index];
				this.couponName = currentItem.name;
				this.amount = this.old_amount;
				this.params.coupon_id = currentItem.id;
				if (currentItem.face_value !== undefined) {
					this.amount = this.amount - currentItem.face_value;
					this.amount = this.amount.toFixed(2);
					if (this.amount < 0) {
						this.amount = 0.0;
					}
				}
			},
			// 获取套餐详情
			getSetmeal() {
				http.get(api.member_setmeal).then(res => {
					if (res.data.code == 200) {
						this.mysetmealInfo = res.data.data.info;
					}
				});
			},
			//  获取套餐列表
			getSetmealList() {
				http.get(api.company_setmeallist).then(res => {
					if (res.data.code == 200) {
						let list = res.data.data.items;
						for (const iterator of list) {
							let expense_arr = iterator.expense.split('.');
							iterator.expense1 = expense_arr[0];
							iterator.expense2 = expense_arr[1];
							this.setmealList.push(iterator);
						}
						if (list.length > 0) {
							this.is_apply = list[0].is_apply;
							this.params.service_id = list[0].id;
							this.old_amount = list[0].expense;
							this.amount = list[0].expense;
							list[0].couponList.forEach(element => {
								element.text = element.name + '(-￥' + element.face_value + ')';
								this.couponList.push(element);
							});
							if (this.couponList.length > 1) {
								this.couponName = '选择优惠券';
							}
							this.setmealDetail = list[0];
						}
					}
				});
			},
			// 套餐点击
			handleSetMeal(item, index) {
				this.setmealDetail = item;
				this.typeItemIndex = index;
				this.is_apply = item.is_apply;
				this.params.service_id = item.id;
				this.old_amount = item.expense;
				this.amount = item.expense;
				this.params.coupon_id = 0;
				this.couponList = [{
					id: 0,
					text: '不使用优惠券',
					name: '不使用优惠券'
				}];
				item.couponList.forEach(element => {
					element.text = element.name + '(-￥' + element.face_value + ')';
					this.couponList.push(element);
				});
				if (this.couponList.length > 1) {
					this.couponName = '选择优惠券';
				} else {
					this.couponName = '暂无可用优惠券';
				}
			},
			// 跳转
			/**
			 * @url 跳转路径
			 * @name 参数名称
			 * @params 参数
			 * */
			handleJump(url, name, params) {
				if (params) {
					uni.navigateTo({
						url: url + '?' + name + '=' + JSON.stringify(params)
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100%;
		background: #232229;

		.title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fcd399;
			background: linear-gradient(0deg, #fce0b0 0%, #cba576 100%);
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			font-size: 30rpx;
		}

		.info {
			height: calc(100% - 140rpx);
			overflow-y: auto;
			position: relative;
			box-sizing: border-box;

			.mySetMeal {
				margin: 0 36rpx;
				height: 453rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				z-index: 15;
				background: url('@/service/static/img/mySetMealBg.png') no-repeat top center / 100% auto;
				padding-top: 50rpx;
				box-sizing: border-box;

				.t1 {
					color: #fff;
					background: linear-gradient(0deg, #dc9d5f 0%, #e8c89d 54.736328125%, #f7e2c0 100%);
					-webkit-text-fill-color: transparent;
					-webkit-background-clip: text;
					font-weight: bold;
					font-size: 42rpx;
					padding-left: 36rpx;
					margin-bottom: 24rpx;
				}

				.t2 {
					color: #cbbeab;
					font-size: 24rpx;
					padding-left: 36rpx;
					margin-bottom: 30rpx;
				}

				.t3 {
					width: 217rpx;
					height: 53rpx;
					line-height: 53rpx;
					font-size: 26rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					color: #2f2322;
					background: url('@/service/static/img/setmealBack.png') no-repeat 180rpx center / 12rpx 24rpx,
						url('@/service/static/img/mySetMealBg2.png') no-repeat left center / 100% auto;
				}
			}

			.infoInner {
				background: #eee;
				margin-top: 360rpx;
				padding-bottom: 130rpx;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: -102rpx;
					height: 106rpx;
					background: #fff;
					background: url('@/service/static/img/mySetMealBg3.png') no-repeat top center / 100% auto;
				}

				.setMealType {
					padding-top: 30rpx;

					.typeTitle1 {
						text-align: center;
						color: #333;
						font-size: 43rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.typeTitle2 {
						text-align: center;

						.text {
							display: inline-block;
							color: #2f2322;
							font-size: 24rpx;
							border: 1px solid #2f2322;
							padding: 10rpx 27rpx;
						}
					}

					.setMealTypeList {
						overflow-y: auto;
						margin: 53rpx 0 32rpx 36rpx;
						white-space: nowrap;

						.typeItem {
							width: 263rpx;
							height: 283rpx;
							box-sizing: border-box;
							padding: 18rpx;
							display: inline-block;
							margin-right: 24rpx;
							background: url('@/service/static/img/setMealItem.png') no-repeat top center / 100% 100%;
							text-align: center;
							vertical-align: middle;
							position: relative;

							&.ac {
								background: url('@/service/static/img/setMealItemAc.png') no-repeat top center / 100% 100%;
							}

							.recommend {
								width: 70rpx;
								height: 30rpx;
								position: absolute;
								left: 8rpx;
								top: 8rpx;
								background: url('@/service/static/img/setmealIcon2.png') no-repeat left center / 100% 100%;
							}

							.limit {
								width: 70rpx;
								height: 30rpx;
								position: absolute;
								left: 8rpx;
								top: 8rpx;
								background: url('@/service/static/img/setmealIcon1.png') no-repeat left center / 100% 100%;
							}

							.t1 {
								font-size: 28rpx;
								color: #333;
								padding-top: 20rpx;
								padding-bottom: 15rpx;
							}

							.t2 {
								font-size: 40rpx;
								color: #c73e32;
								margin-bottom: 10rpx;
							}

							.t3 {
								color: #c73d32;
								font-size: 26rpx;
							}

							.t4 {
								color: #5b2c14;
								text-align: center;
								font-size: 26rpx;
								padding: 8rpx 0;
								margin-top: 20rpx;

								&.ac {
									margin-top: 66rpx;
								}
							}
						}
					}
				}

				.detail {
					padding: 40rpx 36rpx 20rpx;
					background: #efe4d6;
					margin: 0 36rpx 32rpx;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						right: -20rpx;
						top: 95rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #eee;
					}

					&::after {
						content: '';
						position: absolute;
						left: -20rpx;
						top: 95rpx;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #eee;
					}

					.detailTitle {
						color: #333;
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 15rpx;

						&.pd {
							padding-top: 50rpx;
						}
					}

					.list {
						display: flex;
						flex-wrap: wrap;

						.item {
							color: #57270f;
							font-size: 24rpx;
							padding: 10rpx 0;
							flex-shrink: 0;
							width: 50%;
						}
					}
				}

				.payType {
					padding: 0 36rpx;
					background: linear-gradient(270deg, rgba(253, 219, 174, 0.2), rgba(241, 181, 109, 0.2));

					.coupon {
						border-bottom: 1rpx solid #d1c1b2;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 36rpx 0;
						font-size: 30rpx;

						.label {
							color: #57270f;
						}

						.text {
							color: #57270f;
							display: flex;
							align-items: center;
							font-size: 28rpx;
						}
					}

					.payLine {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 25rpx 0;

						.label {
							color: #57270f;
							font-size: 28rpx;

							&.wx {
								padding-left: 52rpx;
								background: url('@/service/static/img/wxPayIcon.png') no-repeat left center / 31rpx 27rpx;
							}

							&.al {
								padding-left: 50rpx;
								background: url('@/service/static/img/aliPayIcon.png') no-repeat left center / 28rpx 28rpx;
							}
						}

						.text {}
					}
				}
			}

			.btns {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 36rpx;
				background: #2b2a34;

				.price {
					color: #57270f;
					font-size: 28rpx;
					background: linear-gradient(0deg, #dc9d5f 0%, #e8c89d 54.736328125%, #f7e2c0 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					-webkit-background-clip: text;
					font-weight: bold;
				}

				.payBtn {
					color: #333;
					font-size: 28rpx;
					background: linear-gradient(0deg, #dc9d5f, #e8c89d, #f7e2c0);
					border-radius: 10rpx;
					width: 242rpx;
					height: 68rpx;
					text-align: center;
					line-height: 68rpx;
				}
			}
		}
	}
</style>